<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>day08-uni-app项目 | 武汉设计工程学院yyds</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/xcx_dx/favicon.ico">
    <link rel="apple-touch-icon" href="/xcx_dx/apple-touch-icon.png">
    <meta name="description" content="">
    <meta name="referrer" content="no-referrer">
    
    <link rel="preload" href="/xcx_dx/assets/css/0.styles.e1df3f18.css" as="style"><link rel="preload" href="/xcx_dx/assets/js/app.c36966b9.js" as="script"><link rel="preload" href="/xcx_dx/assets/js/2.13776caa.js" as="script"><link rel="preload" href="/xcx_dx/assets/js/7.17973866.js" as="script"><link rel="prefetch" href="/xcx_dx/assets/js/10.03e33fcc.js"><link rel="prefetch" href="/xcx_dx/assets/js/11.cead7584.js"><link rel="prefetch" href="/xcx_dx/assets/js/12.bcd5da7d.js"><link rel="prefetch" href="/xcx_dx/assets/js/13.8aa3d205.js"><link rel="prefetch" href="/xcx_dx/assets/js/14.6565609c.js"><link rel="prefetch" href="/xcx_dx/assets/js/15.1e819a14.js"><link rel="prefetch" href="/xcx_dx/assets/js/16.d240c4eb.js"><link rel="prefetch" href="/xcx_dx/assets/js/17.1054f905.js"><link rel="prefetch" href="/xcx_dx/assets/js/18.7e22f3ac.js"><link rel="prefetch" href="/xcx_dx/assets/js/3.9977063c.js"><link rel="prefetch" href="/xcx_dx/assets/js/4.1f2503c5.js"><link rel="prefetch" href="/xcx_dx/assets/js/5.9aeec249.js"><link rel="prefetch" href="/xcx_dx/assets/js/6.8d7d3795.js"><link rel="prefetch" href="/xcx_dx/assets/js/8.d6f94428.js"><link rel="prefetch" href="/xcx_dx/assets/js/9.ce80b26f.js">
    <link rel="stylesheet" href="/xcx_dx/assets/css/0.styles.e1df3f18.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/xcx_dx/" class="home-link router-link-active"><img src="/xcx_dx/doraameng.jpg" alt="武汉设计工程学院yyds" class="logo"> <span class="site-name can-hide">武汉设计工程学院yyds</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/xcx_dx/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/xcx_dx/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/01" class="sidebar-heading clickable"><span>1-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/02" class="sidebar-heading clickable"><span>2-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/03" class="sidebar-heading clickable"><span>3-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/04" class="sidebar-heading clickable"><span>4-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/05" class="sidebar-heading clickable"><span>5-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/06" class="sidebar-heading clickable"><span>6-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/07" class="sidebar-heading clickable"><span>7-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/08" class="sidebar-heading clickable open active"><span>8-uni-app项目</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/xcx_dx/xcx/08.html" aria-current="page" class="active sidebar-link">day08-uni-app项目</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_01-uni-app介绍" class="sidebar-link">01.uni-app介绍</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#今日课程安排" class="sidebar-link">今日课程安排</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#uni-app简介" class="sidebar-link">uni-app简介</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#相关面试题" class="sidebar-link">相关面试题</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#小结" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_02-uni-app初体验" class="sidebar-link">02.uni-app初体验</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-2" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#思路" class="sidebar-link">思路</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#核心步骤" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#小结-2" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_03-uni-app项目导入" class="sidebar-link">03.uni-app项目导入</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-3" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#核心步骤-2" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#小结-3" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_04-uni-app目录结构" class="sidebar-link">04.uni-app目录结构</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-4" class="sidebar-link">目标</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_05-uni-app生命周期" class="sidebar-link">05. uni-app生命周期</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-5" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#uni-app生命周期简介" class="sidebar-link">uni-app生命周期简介</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#小结-4" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_06-uni-app的api" class="sidebar-link">06.uni-app的api</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-6" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#uni-api简介" class="sidebar-link">uni api简介</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#uni-api使用" class="sidebar-link">uni api使用</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#小结-5" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_07-uni-app自定义组件-传统方式" class="sidebar-link">07.uni-app自定义组件—传统方式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-7" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#核心步骤-3" class="sidebar-link">核心步骤</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_08-uni-app自定义组件-easycom" class="sidebar-link">08.uni-app自定义组件—easycom</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-8" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#简介" class="sidebar-link">简介</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#核心步骤-4" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#小结-6" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_09-uni-app组件库uviewui" class="sidebar-link">09.uni-app组件库uViewUI</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-9" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#uview介绍" class="sidebar-link">uview介绍</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#关键步骤" class="sidebar-link">关键步骤</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_10-黑马优购项目介绍" class="sidebar-link">10.黑马优购项目介绍</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-10" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#简介-2" class="sidebar-link">简介</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#技术栈" class="sidebar-link">技术栈</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#素材" class="sidebar-link">素材</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_11-项目配置-窗口样式和tabbar" class="sidebar-link">11.项目配置—窗口样式和tabBar</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-11" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#核心步骤-5" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#参考代码" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_13-首页-顶部搜索框" class="sidebar-link">13.首页—顶部搜索框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-12" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#思路-2" class="sidebar-link">思路</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#示例代码" class="sidebar-link">示例代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_14-首页-轮播图" class="sidebar-link">14.首页—轮播图</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-13" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#核心步骤-6" class="sidebar-link">核心步骤</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_15-首页-http请求封装-优化请求发送方式" class="sidebar-link">15.首页—http请求封装 --- 优化请求发送方式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-14" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#核心步骤-7" class="sidebar-link">核心步骤</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_16-首页-入口导航" class="sidebar-link">16.首页—入口导航</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-15" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#核心步骤-8" class="sidebar-link">核心步骤</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_17-首页-楼层静态结构搭建" class="sidebar-link">17.首页—楼层静态结构搭建</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-16" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#核心步骤-9" class="sidebar-link">核心步骤</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_18-分类页-搜索框组件封装" class="sidebar-link">18.分类页—搜索框组件封装</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-17" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#核心步骤-10" class="sidebar-link">核心步骤</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_02-小程序中的视口高度-100vh" class="sidebar-link">02.小程序中的视口高度—100vh</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-18" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#导入" class="sidebar-link">导入</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#vh在小程序中的表现" class="sidebar-link">vh在小程序中的表现</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#代码验证" class="sidebar-link">代码验证</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#小结-7" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_03-css中的calc计算函数" class="sidebar-link">03.css中的calc计算函数</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-19" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#定义与用法" class="sidebar-link">定义与用法</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_19-分类页-静态页面搭建" class="sidebar-link">19.分类页-静态页面搭建</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-20" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#示例代码-2" class="sidebar-link">示例代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_20-分类页-左侧分类计算和渲染" class="sidebar-link">20.分类页—左侧分类计算和渲染</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-21" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#核心步骤-11" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#参考代码-2" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_21-分类页-右侧分类计算和切换效果" class="sidebar-link">21.分类页—右侧分类计算和切换效果</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-22" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#思路-3" class="sidebar-link">思路</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#核心步骤-12" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#参考代码-3" class="sidebar-link">参考代码</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#小结-8" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#_22-分类页-解决返回顶部bug" class="sidebar-link">22.分类页—解决返回顶部bug</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#目标-23" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#现存问题" class="sidebar-link">现存问题</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/08.html#解决方案" class="sidebar-link">解决方案</a></li></ul></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/09" class="sidebar-heading clickable"><span>9-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/10" class="sidebar-heading clickable"><span>10-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="day08-uni-app项目"><a href="#day08-uni-app项目" class="header-anchor">#</a> day08-uni-app项目</h1> <h2 id="_01-uni-app介绍"><a href="#_01-uni-app介绍" class="header-anchor">#</a> 01.uni-app介绍</h2> <h3 id="目标"><a href="#目标" class="header-anchor">#</a> 目标</h3> <p>认识uni-app，了解uni-app的特点</p> <h3 id="今日课程安排"><a href="#今日课程安排" class="header-anchor">#</a> 今日课程安排</h3> <ul><li>uni app 介绍 &amp; 初体验</li> <li>uni app 目录结构</li> <li>uni app 生命周期</li> <li>uni api</li> <li>easycom 组件引入</li> <li>uview 使用</li> <li>黑马优购首页</li></ul> <h3 id="uni-app简介"><a href="#uni-app简介" class="header-anchor">#</a> uni-app简介</h3> <p>uni-app 是一个使用**Vue.js **开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台<br>选择 uni-app 框架两个主要原因：</p> <ol><li>使用 Vue.js 语法开发</li> <li>支持编译成多端</li></ol> <p>官网地址：<a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer">https://uniapp.dcloud.net.cn/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="相关面试题"><a href="#相关面试题" class="header-anchor">#</a> 相关面试题</h3> <p>说一下你们项目为啥选uni-app而不是用原生小程序做开发？</p> <h3 id="小结"><a href="#小结" class="header-anchor">#</a> 小结</h3> <ol><li>uni-app的特点</li> <li>使用 Vue.js 语法开发</li> <li>支持编译成多端</li></ol> <h2 id="_02-uni-app初体验"><a href="#_02-uni-app初体验" class="header-anchor">#</a> 02.uni-app初体验</h2> <h3 id="目标-2"><a href="#目标-2" class="header-anchor">#</a> 目标</h3> <p>能通过vue-cli脚手架创建uni-app项目</p> <h3 id="思路"><a href="#思路" class="header-anchor">#</a> 思路</h3> <p>uni app 官网提供了两种 创建</p> <ol><li>uni app 项目的方式使用 配套的开发工具 HBuilderX ，可视化的方式来创建和开发项目使用</li> <li>基于 vue-cli 脚手架 来创建和开发项目**（老师推荐）**</li></ol> <h3 id="核心步骤"><a href="#核心步骤" class="header-anchor">#</a> 核心步骤</h3> <ol><li>全局安装脚手架</li></ol> <ul><li>**npm install -g @vue/cli@4 ** （<strong>切记安装4.x.x的版本</strong>）</li> <li>vue -V</li></ul> <ol start="2"><li>使用脚手架创建 uni app 项目</li></ol> <ul><li><strong>vue create -p dcloudio/uni-preset-vue my-project</strong></li> <li>如有模板选择选  <strong>默认模板</strong></li></ul> <ol start="3"><li>编译 uni app 项目</li></ol> <ul><li><strong>npm run serve</strong></li></ul> <ol start="4"><li>体验成功</li> <li>Vscode 插件安装 <strong>uni-helper</strong></li></ol> <h3 id="小结-2"><a href="#小结-2" class="header-anchor">#</a> 小结</h3> <ol><li>vue-cli一定选<strong>4.x</strong>的版本。</li> <li>模板选<strong>默认模板</strong></li> <li>项目创建指令<strong>vue create -p dcloudio/uni-preset-vue my-project</strong></li></ol> <h2 id="_03-uni-app项目导入"><a href="#_03-uni-app项目导入" class="header-anchor">#</a> 03.uni-app项目导入</h2> <h3 id="目标-3"><a href="#目标-3" class="header-anchor">#</a> 目标</h3> <p>能在微信开发者工具中体验uni-app项目 ---  优购项目启动</p> <div class="language- extra-class"><pre class="language-text"><code>git clone https://gitee.com/errlei/ugo_89
</code></pre></div><h3 id="核心步骤-2"><a href="#核心步骤-2" class="header-anchor">#</a> 核心步骤</h3> <ol><li>填入appid</li></ol> <ul><li>找到 src/manifest.json 内的第57行，填入 appid</li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token property">&quot;mp-weixin&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">/* 微信小程序特有相关 */</span>
  <span class="token property">&quot;appid&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 这里填入appid</span>
  <span class="token property">&quot;setting&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;urlCheck&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><ol start="2"><li>运行编译 uni app 项目</li></ol> <ul><li>在项目根目录下运行 <strong>npm run dev:mp-weixin</strong></li></ul> <ol start="3"><li>微信开发者工具导入uniapp项目</li></ol> <ul><li>打开微信开发者工具 导入uni app项目  路径是 /dist/dev/mp-weixin</li></ul> <ol start="4"><li>导入成功</li></ol> <h3 id="小结-3"><a href="#小结-3" class="header-anchor">#</a> 小结</h3> <ol><li>manifest.json文件内填appid</li> <li>npm run dev:mp-weixin编译</li> <li>微信开发者工具的导入路径是 /dist/dev/mp-weixin</li></ol> <h2 id="_04-uni-app目录结构"><a href="#_04-uni-app目录结构" class="header-anchor">#</a> 04.uni-app目录结构</h2> <h3 id="目标-4"><a href="#目标-4" class="header-anchor">#</a> 目标</h3> <p>了解uni-app目录结构，知道每个文件的作用及用途。<br>src目录结构<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1677150352703-55351a85-278d-4fdf-b08f-ea7241b2415f.png#averageHue=%2321282e&amp;clientId=u53be8d98-8884-4&amp;from=paste&amp;height=339&amp;id=u66cb6a7b&amp;name=image.png&amp;originHeight=678&amp;originWidth=1672&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=233704&amp;status=done&amp;style=none&amp;taskId=u230bccd9-1f8b-42cf-994e-3bfe62289d5&amp;title=&amp;width=836" alt="image.png"></p> <h2 id="_05-uni-app生命周期"><a href="#_05-uni-app生命周期" class="header-anchor">#</a> 05. uni-app生命周期</h2> <h3 id="目标-5"><a href="#目标-5" class="header-anchor">#</a> 目标</h3> <p>了解uni-app的各种生命周期，知道其触发时机。</p> <h3 id="uni-app生命周期简介"><a href="#uni-app生命周期简介" class="header-anchor">#</a> uni-app生命周期简介</h3> <ul><li>作用：
<ul><li>生命周期是一堆会在特定时期执行的函数</li></ul></li> <li>分类：
<ol><li>应用生命周期   使用小程序的规范
<ul><li>onLaunch</li></ul></li> <li>页面生命周期   使用小程序的规范
<ul><li>onLoad</li></ul></li> <li>组件生命周期   使用vue的规范
<ul><li>created</li></ul></li></ol></li></ul> <h3 id="小结-4"><a href="#小结-4" class="header-anchor">#</a> 小结</h3> <ol><li>应用及页面生命周期，使用小程序的规范</li> <li>组件生命周期，使用vue规范</li></ol> <h2 id="_06-uni-app的api"><a href="#_06-uni-app的api" class="header-anchor">#</a> 06.uni-app的api</h2> <h3 id="目标-6"><a href="#目标-6" class="header-anchor">#</a> 目标</h3> <p>了解uni-app的api与微信原生api的区别，知道其特点。</p> <h3 id="uni-api简介"><a href="#uni-api简介" class="header-anchor">#</a> uni api简介</h3> <p>uni-api 指的是uni-app 针对一些 微信小程序api所做的封装它解决了两个问题</p> <ol><li>原生的小程序api不支持promise形式的调用（需要自己封装）</li> <li>原生的微信小程序api不支持跨平台</li></ol> <h3 id="uni-api使用"><a href="#uni-api使用" class="header-anchor">#</a> uni api使用</h3> <ol><li>改前缀。如 wx.request 修改 为 uni.request 即可。</li> <li>如果该方法有返回值，那么 返回值是一个数组，第1项为错误信息，第2项才是想要的返回结果</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">async</span> <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 小程序练习请求接口： https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312</span>
  <span class="token comment">// 如果模拟器报错    [Symbol.iterator]()  含有这些字段， 那么就不能使用解构赋值</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>error<span class="token punctuation">,</span> res<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">await</span> uni<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="小结-5"><a href="#小结-5" class="header-anchor">#</a> 小结</h3> <ol><li>uni api支持promise格式调用</li> <li>async  await调用时返回的是一个数组，数组的第一项表示错误信息，第2项表示返回结果</li></ol> <h2 id="_07-uni-app自定义组件-传统方式"><a href="#_07-uni-app自定义组件-传统方式" class="header-anchor">#</a> 07.uni-app自定义组件—传统方式</h2> <h3 id="目标-7"><a href="#目标-7" class="header-anchor">#</a> 目标</h3> <p>熟练掌握uni-app自定义组件——传统方式的使用</p> <h3 id="核心步骤-3"><a href="#核心步骤-3" class="header-anchor">#</a> 核心步骤</h3> <ol><li>创建组件</li> <li>引入组件</li> <li>注册组件</li> <li>使用组件</li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1677150459394-1d21556d-221f-424b-942a-dc879cf6f485.png#averageHue=%23505732&amp;clientId=u53be8d98-8884-4&amp;from=paste&amp;height=280&amp;id=uf488b017&amp;name=image.png&amp;originHeight=560&amp;originWidth=1818&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=227254&amp;status=done&amp;style=none&amp;taskId=u7a88f6f1-4a80-437e-886b-710eedc921c&amp;title=&amp;width=909" alt="image.png"></p> <h2 id="_08-uni-app自定义组件-easycom"><a href="#_08-uni-app自定义组件-easycom" class="header-anchor">#</a> 08.uni-app自定义组件—easycom</h2> <h3 id="目标-8"><a href="#目标-8" class="header-anchor">#</a> 目标</h3> <p>熟练掌握uni-app自定义组件——easycom方式的使用</p> <h3 id="简介"><a href="#简介" class="header-anchor">#</a> 简介</h3> <p>easycom是uni-app提供的一种更加简单使用组件的规范</p> <h3 id="核心步骤-4"><a href="#核心步骤-4" class="header-anchor">#</a> 核心步骤</h3> <ol><li>创建组件
<ul><li>必须按照固定格式创建组件 <strong>/components/组件名称/组件名称.vue</strong></li></ul></li> <li>使用组件</li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1677150491591-9ea08f11-e428-4e83-87a2-c7ec2eee487b.png#averageHue=%2375934e&amp;clientId=u53be8d98-8884-4&amp;from=paste&amp;height=176&amp;id=u3c938641&amp;name=image.png&amp;originHeight=352&amp;originWidth=1734&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=156488&amp;status=done&amp;style=none&amp;taskId=u095ece55-e6b3-4af4-bb74-9fd6b8b3649&amp;title=&amp;width=867" alt="image.png"></p> <h3 id="小结-6"><a href="#小结-6" class="header-anchor">#</a> 小结</h3> <p>easycom的组件的命名格式是？</p> <h2 id="_09-uni-app组件库uviewui"><a href="#_09-uni-app组件库uviewui" class="header-anchor">#</a> 09.uni-app组件库uViewUI</h2> <h3 id="目标-9"><a href="#目标-9" class="header-anchor">#</a> 目标</h3> <p>熟练掌握uview的使用</p> <h3 id="uview介绍"><a href="#uview介绍" class="header-anchor">#</a> <a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer">uview介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <p>uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水</p> <p>官方里面推荐的是 <a href="https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html" target="_blank" rel="noopener noreferrer">uni-ui<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="关键步骤"><a href="#关键步骤" class="header-anchor">#</a> 关键步骤</h3> <p><a href="https://www.uviewui.com/components/npmSetting.html" target="_blank" rel="noopener noreferrer">官网参考地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <ol><li>安装依赖 (<strong>注意：项目名称不能有中文字符</strong>)</li></ol> <div class="language-bash extra-class"><pre class="language-bash"><code>// 安装sass
<span class="token function">npm</span> i sass <span class="token parameter variable">-D</span>

// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
<span class="token function">npm</span> i sass-loader@10 <span class="token parameter variable">-D</span>

// 安装uview-ui
<span class="token function">npm</span> <span class="token function">install</span> uview-ui@2.0.31
</code></pre></div><ol start="2"><li>全局引入uview js库</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> uView <span class="token keyword">from</span> <span class="token string">&quot;uview-ui&quot;</span><span class="token punctuation">;</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>uView<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>全局引入uView的全局SCSS主题文件</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* uni.scss */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">'uview-ui/theme.scss'</span><span class="token punctuation">;</span></span>
</code></pre></div><ol start="4"><li>全局引入uview 基础样式</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code>// 在App.vue中首行的位置引入，注意给style标签加入lang=&quot;scss&quot;属性
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token comment">/* 注意要写在第一行，同时给style标签加入lang=&quot;scss&quot;属性 */</span>
  <span class="token atrule"><span class="token rule">@import</span> <span class="token string">&quot;uview-ui/index.scss&quot;</span><span class="token punctuation">;</span></span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="5"><li>配置easycom模式引入uview组件</li></ol> <div class="language-json extra-class"><pre class="language-json"><code><span class="token comment">// pages.json</span>
<span class="token punctuation">{</span>
  <span class="token property">&quot;easycom&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;^u-(.*)&quot;</span><span class="token operator">:</span> <span class="token string">&quot;uview-ui/components/u-$1/u-$1.vue&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 此为本身已有的内容</span>
  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token comment">// ......</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="6"><li>配置vue.config.js文件</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js，如没有此文件则手动创建 放入项目根目录下</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">transpileDependencies</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'uview-ui'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="7"><li>使用uview组件</li></ol> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>u-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>禁用<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>u-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>u-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">loading</span> <span class="token attr-name">loadingText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>加载中<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>u-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>u-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>map<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>图标按钮<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>u-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>u-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>circle<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>按钮形状<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>u-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>u-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>small<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>大小尺寸<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>u-button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_10-黑马优购项目介绍"><a href="#_10-黑马优购项目介绍" class="header-anchor">#</a> 10.黑马优购项目介绍</h2> <h3 id="目标-10"><a href="#目标-10" class="header-anchor">#</a> 目标</h3> <p>了解黑马优购项目</p> <h3 id="简介-2"><a href="#简介-2" class="header-anchor">#</a> 简介</h3> <p>黑马优购是一个基于微信小程序的在线电商项目，微信用户可以在黑马优购上选购喜好的商品，商城提供了浏览商品、筛选商品、收藏商品、加入购物车、在线支付功能。是一个可以满足企业级需要的真实项目。</p> <h3 id="技术栈"><a href="#技术栈" class="header-anchor">#</a> 技术栈</h3> <p>uni-app + vuex + uviewUI<br>工作职责：</p> <ol><li>负责xx模块</li> <li>登录基本流程  token无感刷新</li> <li>使用vuex完成购物车模块</li> <li>不要写的：wx.navigateTo完成页面跳转 使用wx.setStorageSync完成token的本地化存储</li> <li>完成公共组件封装</li> <li>性能优化 千万不要写自己不了解的 如cdn</li></ol> <p>没有UI图，大家使用老师发的写好的打包好的目录跑起来项目，当做UI图</p> <p>然后再打开一个新的小程序开发者工具，开发自己的项目</p> <h3 id="素材"><a href="#素材" class="header-anchor">#</a> 素材</h3> <p>接口文档：<a href="https://www.showdoc.com.cn/128719739414963" target="_blank" rel="noopener noreferrer">https://www.showdoc.com.cn/128719739414963<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="_11-项目配置-窗口样式和tabbar"><a href="#_11-项目配置-窗口样式和tabbar" class="header-anchor">#</a> 11.项目配置—窗口样式和tabBar</h2> <h3 id="目标-11"><a href="#目标-11" class="header-anchor">#</a> 目标</h3> <p>熟练掌握新建页面及配置页面路径</p> <h3 id="核心步骤-5"><a href="#核心步骤-5" class="header-anchor">#</a> 核心步骤</h3> <ol><li>配置窗口样式</li> <li>配置tabBar</li> <li>新建页面</li> <li>配置路径</li> <li>配置tabBar</li></ol> <h3 id="参考代码"><a href="#参考代码" class="header-anchor">#</a> 参考代码</h3> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
	<span class="token property">&quot;easycom&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token property">&quot;^u-(.*)&quot;</span><span class="token operator">:</span> <span class="token string">&quot;uview-ui/components/u-$1/u-$1.vue&quot;</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages</span>
		<span class="token punctuation">{</span>
			<span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/index/index&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;style&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 相当于每个页面的json</span>
				<span class="token property">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;黑马优购&quot;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token punctuation">{</span>
			<span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/category/index&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;style&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
				<span class="token property">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;分类&quot;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token punctuation">{</span>
			<span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/cart/index&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;style&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
				<span class="token property">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;购物车&quot;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token punctuation">{</span>
			<span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/my/index&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;style&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
				<span class="token property">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;我的&quot;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">]</span><span class="token punctuation">,</span>
	<span class="token property">&quot;globalStyle&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 相当于app.json里的window</span>
		<span class="token property">&quot;navigationBarTextStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;white&quot;</span><span class="token punctuation">,</span>
		<span class="token property">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;黑马优购&quot;</span><span class="token punctuation">,</span>
		<span class="token property">&quot;navigationBarBackgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#EA4350&quot;</span><span class="token punctuation">,</span>
		<span class="token property">&quot;backgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#F8F8F8&quot;</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token property">&quot;tabBar&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token property">&quot;color&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#8C8D8D&quot;</span><span class="token punctuation">,</span>
		<span class="token property">&quot;selectedColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#EA4350&quot;</span><span class="token punctuation">,</span>
		<span class="token property">&quot;backgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#FAFAFA&quot;</span><span class="token punctuation">,</span>
		<span class="token property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
			<span class="token property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;首页&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/index/index&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;iconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/static/tabBar/home.png&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;selectedIconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/static/tabBar/home-o.png&quot;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
			<span class="token property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;分类页&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/category/category&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;iconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/static/tabBar/category.png&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;selectedIconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/static/tabBar/category-o.png&quot;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
			<span class="token property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;购物车&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/cart/cart&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;iconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/static/tabBar/cart.png&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;selectedIconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/static/tabBar/cart-o.png&quot;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
			<span class="token property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;我的&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/my/my&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;iconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/static/tabBar/my.png&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;selectedIconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/static/tabBar/my-o.png&quot;</span>
		<span class="token punctuation">}</span><span class="token punctuation">]</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="_13-首页-顶部搜索框"><a href="#_13-首页-顶部搜索框" class="header-anchor">#</a> 13.首页—顶部搜索框</h2> <h3 id="目标-12"><a href="#目标-12" class="header-anchor">#</a> 目标</h3> <p>能熟练查阅uview文档，能借助文档完成控件的使用。</p> <h3 id="思路-2"><a href="#思路-2" class="header-anchor">#</a> 思路</h3> <p>对照UI图，找到相应的组件。</p> <h3 id="示例代码"><a href="#示例代码" class="header-anchor">#</a> 示例代码</h3> <div class="language-html extra-class"><pre class="language-html"><code>// 注意组件定义的位置和名称 easyCom 模式要符合
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>u-search</span>
  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>keyword<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:showAction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">inputAlign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>u-search</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token comment">/* 编译成 页面.wxss */</span>
<span class="token selector">.search</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 10rpx 25rpx<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #eb4450<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_14-首页-轮播图"><a href="#_14-首页-轮播图" class="header-anchor">#</a> 14.首页—轮播图</h2> <h3 id="目标-13"><a href="#目标-13" class="header-anchor">#</a> 目标</h3> <p>完成轮播图模块的渲染</p> <h3 id="核心步骤-6"><a href="#核心步骤-6" class="header-anchor">#</a> 核心步骤</h3> <ol><li>根据UI图完成结构样式搭建
<ul><li>小程序原生网站看示例 （注意写法），是小程序的写法，在uni-app里面需要改写法</li> <li>去uni-app官方看组件，是vue的写法 <a href="https://uniapp.dcloud.net.cn/component/swiper.html" target="_blank" rel="noopener noreferrer">文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li>发请求获取真实数据</li> <li>套用真实数据完成渲染</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
		<span class="token comment">&lt;!-- 轮播图区域 --&gt;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-swiper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>swiper</span>
				<span class="token attr-name">indicator-dots</span>
				<span class="token attr-name">autoplay</span>
				<span class="token attr-name">circular</span>
				<span class="token attr-name">indicator-active-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#EA4350<span class="token punctuation">&quot;</span></span>
				<span class="token attr-name">indicator-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rgba(0,0,0,0.4)<span class="token punctuation">&quot;</span></span>
			<span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>swiper-item</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in swiperList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.goods_id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span>
						<span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.image_src<span class="token punctuation">&quot;</span></span>
						<span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>widthFix<span class="token punctuation">&quot;</span></span>
					<span class="token punctuation">/&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>swiper-item</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>swiper</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
			<span class="token comment">// 轮播图列表</span>
			<span class="token literal-property property">swiperList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token comment">// 调用函数发送请求</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getSwiperList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>	
	<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token comment">// 获取轮播图函数</span>
		<span class="token keyword">async</span> <span class="token function">getSwiperList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">const</span> <span class="token punctuation">[</span>error<span class="token punctuation">,</span> res<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">await</span> uni<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
				<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
				<span class="token keyword">this</span><span class="token punctuation">.</span>swiperList <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.m-swiper,
.m-swiper image</span><span class="token punctuation">{</span>
	<span class="token property">width</span><span class="token punctuation">:</span> 750rpx<span class="token punctuation">;</span>
	<span class="token property">height</span><span class="token punctuation">:</span> 340rpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_15-首页-http请求封装-优化请求发送方式"><a href="#_15-首页-http请求封装-优化请求发送方式" class="header-anchor">#</a> 15.首页—http请求封装 --- 优化请求发送方式</h2> <h3 id="目标-14"><a href="#目标-14" class="header-anchor">#</a> 目标</h3> <p>熟练掌握uview网络请求库的使用</p> <h3 id="核心步骤-7"><a href="#核心步骤-7" class="header-anchor">#</a> 核心步骤</h3> <p><a href="https://www.uviewui.com/js/http.html" target="_blank" rel="noopener noreferrer">uview-ui请求的写法文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <ol><li>配置请求基地址</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code>uni<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span><span class="token function">setConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">/* config 为默认全局配置*/</span>
  config<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">'https://api-hmugo-web.itheima.net/api/public/v1'</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> config
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ol start="2"><li>设置请求拦截器，显示加载提示</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 设置请求拦截器</span>
uni<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// 可使用async await 做异步操作</span>
  uni<span class="token punctuation">.</span><span class="token function">showLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> config
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// 可使用async await 做异步操作</span>
  <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ol start="3"><li>设置响应拦截器，关闭加载提示</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 设置响应拦截器</span>
uni<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  uni<span class="token punctuation">.</span><span class="token function">hideLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> response
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ol start="4"><li>将首页的请求更换为$u.http的形式</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code>uni<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>xxxxx<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_16-首页-入口导航"><a href="#_16-首页-入口导航" class="header-anchor">#</a> 16.首页—入口导航</h2> <h3 id="目标-15"><a href="#目标-15" class="header-anchor">#</a> 目标</h3> <p>完成入口导航模块</p> <h3 id="核心步骤-8"><a href="#核心步骤-8" class="header-anchor">#</a> 核心步骤</h3> <ol><li>根据UI图完成结构样式搭建</li> <li>发请求获取真实数据</li> <li>套用真实数据完成渲染</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 入口导航模块 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in navList<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>navigator</span>
					<span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.name === '分类'<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/pages/category/index<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">:open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.open_type<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">hover-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>none<span class="token punctuation">&quot;</span></span>
        <span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span>
            <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.image_src<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>widthFix<span class="token punctuation">&quot;</span></span>
          <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>navigator</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">v-else</span>
          <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.image_src<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>widthFix<span class="token punctuation">&quot;</span></span>
					<span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.name<span class="token punctuation">&quot;</span></span>
        <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>

  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">keyword</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">swiperList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">navList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 使用的是小程序的页面生命周期钩子</span>
  <span class="token keyword">async</span> <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getNavList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token keyword">async</span> <span class="token function">getNavList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> uni<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;https://api-hmugo-web.itheima.net/api/public/v1/home/catitems&quot;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
       <span class="token keyword">this</span><span class="token punctuation">.</span>navList <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.m-nav</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 12rpx 0 43rpx<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> space-around<span class="token punctuation">;</span>
  <span class="token selector">image</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 128rpx<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_17-首页-楼层静态结构搭建"><a href="#_17-首页-楼层静态结构搭建" class="header-anchor">#</a> 17.首页—楼层静态结构搭建</h2> <h3 id="目标-16"><a href="#目标-16" class="header-anchor">#</a> 目标</h3> <p>完成首页楼层模块静态结构搭建</p> <h3 id="核心步骤-9"><a href="#核心步骤-9" class="header-anchor">#</a> 核心步骤</h3> <ol><li>根据UI图完成结构样式搭建</li> <li>发请求获取真实数据</li> <li>套用真实数据完成渲染</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 楼层模块 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-floor<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floor<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floor-title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span>
            <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://api-hmugo-web.itheima.net/pyg/pic_floor01_title.png<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>widthFix<span class="token punctuation">&quot;</span></span>
          <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>product-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>navigator</span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/pages/<span class="token punctuation">&quot;</span></span> <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navigate<span class="token punctuation">&quot;</span></span> <span class="token attr-name">hover-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>none<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span>
              <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://api-hmugo-web.itheima.net/pyg/pic_floor01_1@2x.png<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>heightFix<span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">/&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>navigator</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>navigator</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in 4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/pages/<span class="token punctuation">&quot;</span></span> <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navigate<span class="token punctuation">&quot;</span></span> <span class="token attr-name">hover-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>none<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span>
              <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://api-hmugo-web.itheima.net/pyg/pic_floor01_2@2x.png<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>heightFix<span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">/&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>navigator</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">.floor-title</span> <span class="token punctuation">{</span>
    <span class="token selector">image</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 750rpx<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token selector">.product-list</span> <span class="token punctuation">{</span>
    <span class="token selector">navigator</span> <span class="token punctuation">{</span>
      <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
      <span class="token property">margin-left</span><span class="token punctuation">:</span> 12rpx<span class="token punctuation">;</span>
      <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10rpx<span class="token punctuation">;</span>
      <span class="token selector">image</span> <span class="token punctuation">{</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 188rpx<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token selector">&amp;:nth-child(1)</span> <span class="token punctuation">{</span>
        <span class="token selector">image</span> <span class="token punctuation">{</span>
          <span class="token property">height</span><span class="token punctuation">:</span> 386rpx<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code> <span class="token comment">&lt;!-- 楼层模块 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-floor<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span>
        <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floor<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in floorList<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.floor_title.name<span class="token punctuation">&quot;</span></span>
      <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>floor-title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.floor_title.image_src<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>widthFix<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>product-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>navigator</span>
            <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>product in item.product_list<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>product.name<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">:url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>product.navigator_url<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navigate<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">hover-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>none<span class="token punctuation">&quot;</span></span>
          <span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span>
              <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>product.image_src<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>heightFix<span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">/&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>navigator</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>

  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">keyword</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">swiperList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">navList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 使用的是小程序的页面生命周期钩子</span>
  <span class="token keyword">async</span> <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getNavList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token keyword">async</span> <span class="token function">getFloorList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> uni<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/home/floordata'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>floorList <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_18-分类页-搜索框组件封装"><a href="#_18-分类页-搜索框组件封装" class="header-anchor">#</a> 18.分类页—搜索框组件封装</h2> <h3 id="目标-17"><a href="#目标-17" class="header-anchor">#</a> 目标</h3> <p>能熟练使用easycom方式封装组件并使用</p> <h3 id="核心步骤-10"><a href="#核心步骤-10" class="header-anchor">#</a> 核心步骤</h3> <ol><li>创建组件</li> <li>使用组件</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code>// ugo-search.vue
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>u-search</span>
      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>搜索<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>keyword<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:showAction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">inputAlign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>u-search</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">keyword</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.m-search</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 10rpx 25rpx<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> #ea4350<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_02-小程序中的视口高度-100vh"><a href="#_02-小程序中的视口高度-100vh" class="header-anchor">#</a> 02.小程序中的视口高度—100vh</h2> <h3 id="目标-18"><a href="#目标-18" class="header-anchor">#</a> 目标</h3> <p>了解视口区域范围</p> <h3 id="导入"><a href="#导入" class="header-anchor">#</a> 导入</h3> <p>面试题：100vh在小程序中的高度与浏览器中的高度有何不同？</p> <h3 id="vh在小程序中的表现"><a href="#vh在小程序中的表现" class="header-anchor">#</a> vh在小程序中的表现</h3> <p><img src="/xcx_dx/assets/img/vh_calc.053a5866.png" alt="vh_calc"></p> <p>状态栏高度</p> <div class="language- extra-class"><pre class="language-text"><code>uni.getSystemInfoSync().statusBarHeight

微信小程序导航栏高度在大部分机型上都是44px， 计算过程比较复杂，可以百度看一些例子
</code></pre></div><p><img src="/xcx_dx/assets/img/miniprogramp_height.9fa6e32a.jpg" alt="小程序的一些特殊高度与结构"></p> <p>结论：</p> <p>100vh在浏览器中 = 屏幕的高度</p> <p>100vh在小程序中 = 屏幕的高度 - 导航栏的高度 - tabbar的高度</p> <h3 id="代码验证"><a href="#代码验证" class="header-anchor">#</a> 代码验证</h3> <p>pages.json</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token comment">// 1. 将顶部导航栏去掉</span>
<span class="token punctuation">{</span>
  <span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/category/index&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;style&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;分类&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;navigationStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;custom&quot;</span> <span class="token comment">// 将顶部导航栏去掉</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
....
<span class="token comment">// 2. 去掉底部tabbar</span>

</code></pre></div><p>注意：小程序中的导航栏和tabbar是可以配置为不可见的。</p> <h3 id="小结-7"><a href="#小结-7" class="header-anchor">#</a> 小结</h3> <p>面试题：100vh在小程序中的高度与浏览器中的高度有何不同？</p> <h2 id="_03-css中的calc计算函数"><a href="#_03-css中的calc计算函数" class="header-anchor">#</a> 03.css中的calc计算函数</h2> <h3 id="目标-19"><a href="#目标-19" class="header-anchor">#</a> 目标</h3> <p>掌握calc的用法</p> <h3 id="定义与用法"><a href="#定义与用法" class="header-anchor">#</a> 定义与用法</h3> <ul><li>calc() 此 CSS函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：length、frequency, angle、time、percentage、number</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 50px<span class="token punctuation">)</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100vh - 20rpx - 50px<span class="token punctuation">)</span>

</code></pre></div><h2 id="_19-分类页-静态页面搭建"><a href="#_19-分类页-静态页面搭建" class="header-anchor">#</a> 19.分类页-静态页面搭建</h2> <h3 id="目标-20"><a href="#目标-20" class="header-anchor">#</a> 目标</h3> <p>能利用vh及calc完成任意元素高度计算，实现静态页面搭建</p> <h3 id="示例代码-2"><a href="#示例代码-2" class="header-anchor">#</a> 示例代码</h3> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 搜索模块 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ugo-search</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ugo-search</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 主体区域 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-category<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in 60<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>左边{{ item }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cate<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in 10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>大家电{{ item }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goods-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goods<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goods in 10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goods<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span>
                <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pic<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>aspectFit<span class="token punctuation">&quot;</span></span>
              <span class="token punctuation">/&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>曲面电视{{ goods }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.m-category</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100vh - 44px<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token selector">.left</span> <span class="token punctuation">{</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 182rpx<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 28rpx<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #F3F3F3<span class="token punctuation">;</span>
    <span class="token selector">.item</span> <span class="token punctuation">{</span>
      <span class="token property">padding</span><span class="token punctuation">:</span> 17rpx 0<span class="token punctuation">;</span>
      <span class="token selector">&amp;.active</span><span class="token punctuation">{</span>
        <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #ea4350<span class="token punctuation">;</span>
        <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
        <span class="token selector">&amp;::before</span><span class="token punctuation">{</span>
          <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
          <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
          <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
          <span class="token property">width</span><span class="token punctuation">:</span> 4rpx<span class="token punctuation">;</span>
          <span class="token property">height</span><span class="token punctuation">:</span> 44rpx<span class="token punctuation">;</span>
          <span class="token property">background</span><span class="token punctuation">:</span> #ea4350<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token selector">.right</span> <span class="token punctuation">{</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
    <span class="token selector">.title</span><span class="token punctuation">{</span>
      <span class="token property">margin</span><span class="token punctuation">:</span> 18rpx 0 21rpx<span class="token punctuation">;</span>
      <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token selector">.goods-list</span><span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0 48rpx<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
  <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
  <span class="token selector">.pic</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 120rpx<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 120rpx<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">.name</span><span class="token punctuation">{</span>
    <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 30rpx<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 21rpx<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #2E2E2E<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">line-height</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_20-分类页-左侧分类计算和渲染"><a href="#_20-分类页-左侧分类计算和渲染" class="header-anchor">#</a> 20.分类页—左侧分类计算和渲染</h2> <h3 id="目标-21"><a href="#目标-21" class="header-anchor">#</a> 目标</h3> <p>完成左侧分类区域的渲染</p> <h3 id="核心步骤-11"><a href="#核心步骤-11" class="header-anchor">#</a> 核心步骤</h3> <ol><li>根据UI图完成结构样式搭建（已完成）</li> <li><strong>发请求获取真实数据</strong></li> <li><strong>套用真实数据完成渲染</strong> <ol><li>用计算属性简化列表数据后再做渲染</li></ol></li></ol> <h3 id="参考代码-2"><a href="#参考代码-2" class="header-anchor">#</a> 参考代码</h3> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 获取分类接口数据</span>
    <span class="token keyword">async</span> <span class="token function">getCateList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> uni<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;/categories&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>cateList <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">cateLeft</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cateList<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">cat_id</span><span class="token operator">:</span> item<span class="token punctuation">.</span>cat_id<span class="token punctuation">,</span>
          <span class="token literal-property property">cat_name</span><span class="token operator">:</span> item<span class="token punctuation">.</span>cat_name<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    
  <span class="token comment">&lt;!-- 分类页左边滚动区 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span>
    <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item,index) in cateLeft<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.cat_id<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{active: index === 0}<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span>{{ item.cat_name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_21-分类页-右侧分类计算和切换效果"><a href="#_21-分类页-右侧分类计算和切换效果" class="header-anchor">#</a> 21.分类页—右侧分类计算和切换效果</h2> <h3 id="目标-22"><a href="#目标-22" class="header-anchor">#</a> 目标</h3> <p>完成右侧渲染及左右联动效果</p> <h3 id="思路-3"><a href="#思路-3" class="header-anchor">#</a> 思路</h3> <p>利用数组下标让左侧和右侧关联起来</p> <h3 id="核心步骤-12"><a href="#核心步骤-12" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给左侧绑定切换事件完成联动逻辑</li> <li>定义变量用于保存当前左边选中的分类的下标</li> <li>在回调中更改当前选中的下标</li> <li>套用真实数据完成默认选中分类的渲染</li> <li>用计算属性保存当前选中的分类对应的商品数据</li></ol> <h3 id="参考代码-3"><a href="#参考代码-3" class="header-anchor">#</a> 参考代码</h3> <div class="language-vue extra-class"><pre class="language-vue"><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 顶部搜索区域 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ugo-search</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ugo-search</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 分类页主体 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-category<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!-- 分类页左边滚动区 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span>
          <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeActiveIndex(index)<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, index) in cateLeft<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.cat_id<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ active: activeIndex === index }<span class="token punctuation">&quot;</span></span>
          <span class="token punctuation">&gt;</span></span>{{ item.cat_name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span>
        <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!-- 分类页右边滚动区 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">:scroll-top</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scrollTop<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 每个子分类 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in cateRight<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.cat_id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cate-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token comment">&lt;!-- 子分类名称 --&gt;</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ item.cat_name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
          <span class="token comment">&lt;!-- 子分类商品列表 --&gt;</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goods-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goods<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goods in item.children<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pic<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goods.cat_icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>aspectFit<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ goods.cat_name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">cateList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token comment">// 当前选择分类的下标</span>
      <span class="token literal-property property">activeIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 发送请求获取数据</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getCateList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 获取分类接口数据</span>
    <span class="token keyword">async</span> <span class="token function">getCateList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> uni<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;/categories&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>cateList <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 更改选中的分类</span>
    <span class="token function">changeActiveIndex</span><span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>activeIndex <span class="token operator">=</span> index<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">cateLeft</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cateList<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">cat_id</span><span class="token operator">:</span> item<span class="token punctuation">.</span>cat_id<span class="token punctuation">,</span>
          <span class="token literal-property property">cat_name</span><span class="token operator">:</span> item<span class="token punctuation">.</span>cat_name<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">cateRight</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cateList<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span>
        <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cateList<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>activeIndex<span class="token punctuation">]</span><span class="token punctuation">.</span>children
        <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="小结-8"><a href="#小结-8" class="header-anchor">#</a> 小结</h3> <p>联动实现的关键是找到关联健，一般通过下标或者id进行管理</p> <h2 id="_22-分类页-解决返回顶部bug"><a href="#_22-分类页-解决返回顶部bug" class="header-anchor">#</a> 22.分类页—解决返回顶部bug</h2> <h3 id="目标-23"><a href="#目标-23" class="header-anchor">#</a> 目标</h3> <p>解决多个tab切换时，scroll-view里的scroll-top不重置的问题。</p> <h3 id="现存问题"><a href="#现存问题" class="header-anchor">#</a> 现存问题</h3> <p>在多个tab间相互切换时，scroll-top并没有被重置为0，而是上一个scroll-view的滚动值</p> <h3 id="解决方案"><a href="#解决方案" class="header-anchor">#</a> 解决方案</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 更改选中的分类</span>
<span class="token function">changeActiveIndex</span><span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>activeIndex <span class="token operator">=</span> index<span class="token punctuation">;</span>
  <span class="token comment">// 将其重置为-1，然后再下一次更新时重置为0，这样scroll-view就能每次都监测到变化</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>scrollTop <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>scrollTop <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/xcx_dx/xcx/07.html" class="prev">
        day07-享+本地生活
      </a></span> <span class="next"><a href="/xcx_dx/xcx/09.html">
        day09-uni-app项目
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/xcx_dx/assets/js/app.c36966b9.js" defer></script><script src="/xcx_dx/assets/js/2.13776caa.js" defer></script><script src="/xcx_dx/assets/js/7.17973866.js" defer></script>
  </body>
</html>
